<template>
    <view class="content">
        <view class="components">
            <view class="components-item" v-for="item in components" :key="item.name + item.path" @tap="handleItemClick(item)">
                <pure-cell :icon="item.icon" :title="item.name" :desc="item.desc" arrow></pure-cell>
            </view>
        </view>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    // 组件列表
    const components = ref([
        { name: "电梯导航、联动菜单", desc: "Elevator 基础使用演示", path: "/pages/elevator/base", icon: "/static/icons/elevator.png" },
        { name: "电梯导航、联动菜单", desc: "Elevator 异步加载数据演示", path: "/pages/elevator/async", icon: "/static/icons/elevator.png" },
        { name: "电梯导航、联动菜单", desc: "Elevator 二级分类演示", path: "/pages/elevator/subtabs", icon: "/static/icons/elevator.png" },
    ]);

    // 点击事件
    // item: 组件列表项数据
    function handleItemClick(item) {
        uni.navigateTo({
            url: item.path,
        });
    }
</script>

<style scoped>
    .components {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .components-item {
        border-radius: 6px;
        overflow: hidden;
    }

    .components-item-icon {
        flex-shrink: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 20px;
    }

    .components-item-name {
        flex: 1;
        padding: 0 12px;
        font-weight: bold;
    }

    .components-item-arrow {
        flex-shrink: 0;
        color: #888888;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
</style>
